<!DOCTYPE html>
<html>
<head>
	<title>LOL&nbsp;&ndash;&nbsp;直播聚合</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="/css/pure-min.css">
	<link href="/css/bootstrap.min.css" rel="stylesheet">
	{% if version=='v1.1' %}<link href="/css/v1.1.css" rel="stylesheet">{% endif %}
	{% if version=='v2.1' %}<link href="/css/card-type-layout.css" rel="stylesheet">{% endif %}
	{# <script>
		//检测当前的客户端是否是手机
        (function(){
        	//通过User-Agent检测
            var MOBILE_UA_REGEXP = /(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone|Prerender|MicroMessenger)/i;
            if (MOBILE_UA_REGEXP.test(navigator.userAgent)) {
                window.location.replace('/mobile');  //跳转
            }
        })();
    </script> #}
	<style type="text/css">
		body {
			font-family: "helvetica neue",arial,sans-serif;
			font-size: 28px;
			background-color: #edece9;
		}
		.btn {
			display: inline-block;
			height: 30px;
			line-height: 30px;
			border: 1px solid #ccc;
			background-color: #fff;
			padding: 0 10px;
			margin-right: 50px;
			color: #333;
		}
		.btn:hover {
			background-color: #eee;
		}
	</style>
	{% if version=='v2.1' %}
	<script type="text/javascript">
		function getQueryString(name) { 
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
			var r = window.location.search.substr(1).match(reg); 
			if (r != null) return unescape(r[2]); return null; 
		}
		window.onload = function(){
			var prev_page = document.getElementById("prev_page");
			var next_page = document.getElementById("next_page");
			//获取url参数的函数
			var page = getQueryString("page");
			if(page){
				next_page.setAttribute("href","?page="+(Number(page)+1));
				if(page != "1"){
					prev_page.setAttribute("href","?page="+(Number(page)-1));
				}
			}
			else{
				next_page.setAttribute("href","?page=2");
			}
		}
	</script>
	{% endif %}
</head>
<body>
{% if version=='v2.1' %}
<div class="lives" id="lives">
	{% for data in datas %}
	<a title="{{ data.get('title') }}" href="{{ data.get('link') }}" target="_blank">
	<div class="card">
		<div class="body">
			<img src="{{ data.get('img') }}" class="screen-shot">
		</div>
	<div class="footer" style="background-color: #4caf50;">
		<span style="color:	#FAEBD7">
		<i class="title-icon"></i>
			{{ data.get('title') }}
		</span>
		<br>
		<span style="float: left;">
		<i class="video-person-icon"></i>
			{{ data.get('name') }}
		</span>
		<span style="float: right;">
			<i class="people-icon"></i>
			{{ data.get('people') }}人
		</span>
	</div>
	</div>
	</a>
	{% endfor %}
	<p style="text-align: center">
		<a href="javascript:;" class="btn" id="prev_page">上一页</a>
		<a href="javascript:;" class="btn" id="next_page">下一页</a>
	</p>
</div>
{% endif %}

{% if version== 'v1.1' %}
	 <!-- 旧版流式布局 -->
	{% for data in datas %}
		<a href="{{ data.get('link') }}" class="live-wrapper" target="_blank">
			<div class="pure-g live">
				<div class="pure-u-1-5">
					<img class="pure-img live-img" src="{{ data.get('img') }}">
				</div>
				<div class="pure-u-2-5">
					<div class="name">{{ data.get('name') }}</div>
					<div class="title">{{ data.get('title') }}</div>
				</div>
				<div class="pure-u-1-5">
					<span class="type {{ data.get('type') }}"></span>
				</div>
				<div class="pure-u-1-5">
					<div class="num">{{ data.get('people') }}人</div>
				</div>
			</div>
		</a>
	{% endfor %}
{% endif %}
</body>
</html>